<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="wrap">
        <div class="wrap-top">
            <div class="wrap-nav">
                <div class="wrap-top-left">
                    <img src="../img/logo.png" alt="">  
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content-img">
                <img src="https://s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg" alt="">
            </div>
            <div class="content-biaoge">
                <form action="../php/login.php" method="post">
                    <table>
                        <tr>
                            <td>用户名：</td>
                            <td><input type="text" name="username"></td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td><input type="password" name="password"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input class="loginBtn" type="submit" value="登录">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
var form = document.querySelector("form");
var user = document.querySelector("[name='username']");
var pass = document.querySelector("[name='password']");
form.onsubmit = function(){
    // 对数据做校验
    var reg = /^[a-zA-Z]\w{3,9}$/; // 用户名：字母开头，字母、数字、下划线组成，4~10位组成
    if(!reg.test(user.value)){
        alert("用户名不符合规则");
        return false;
    }

    var reg = /^[a-zA-Z0-9]{6,12}$/; // 密码：数字字母下划线组成，6~12位
    if(!reg.test(pass.value)){
        alert("密码不符合规则");
        return false;
    }
}
</script>
</html>